<template>
	<view class="main">
		<view style="position: fixed;top: 0;width: 100%;background-color: #ffffff;">
			<view class="main-top">
				<view class="main-search">
					<image src="../../../../../static/phone/phone_search.png" 
					style="width: 32rpx;height: 32rpx;margin-left: 32rpx;"></image>
					
					<input type="text" v-model="search"  class="placeholder_class"  placeholder-style="color:#999999"
						placeholder="搜索文件名称" @input="searchInput">
				</view>
			</view>
			<view style="display: flex;align-items: center;;margin-top: 16rpx;">
				<text class="ttext1" style="margin-left: 32rpx;">文件</text>
				
				<view style="display: flex;align-items: center;margin-left: auto;margin-right: 32rpx;">
					<view style="display: flex;align-items: center;" @click="sort">
						<text class="ttext1" style="margin-left: 32rpx;">排序</text>
						<image src="../../../../../static/arrow_down.png" 
						style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>
					</view>
					
					<view style="display: flex;align-items: center;margin-left: 64rpx;" @click="sift">
						<text class="ttext1" style="margin-left: 32rpx;">筛选</text>
						<image src="../../../../../static/select.png" 
						style="width: 32rpx;height: 32rpx;margin-left: 4rpx;"></image>
					</view>
					
				</view>
				
			</view>
		</view>
		
		
		<view  style="margin-top: 200rpx;margin-bottom: 32rpx;" >
			<view v-for="(item,index) in dataList" :key="index"
			style="margin-left: 32rpx;margin-right: 32rpx;margin-top: 24rpx;">
			
				<view class="list-content-yuyin" v-if="item.attachFile.fileSuffix =='aac' || item.attachFile.fileSuffix=='m4a'">
					<image :src="item.openOrStopMusic ? musicStop:musicOpen" @click="opreaMusic(item,index)"
						style="width: 44rpx;height: 44rpx;margin-left: 24rpx;"></image>
					<image src="../../../../../static/phone/case-detail-music.png"
						style="width: 160rpx;height: 28rpx;margin-left: 24rpx;"></image>
				</view>
			
				<view style="display: flex;" v-if="item.attachFile.fileSuffix !='aac' && item.attachFile.fileSuffix!='m4a'" @click="preview(item,index)">
					<image src="../../../../../static/phone/jpg.png" style="width: 48rpx;height: 48rpx;"
					v-if="item.attachFile.fileSuffix =='jpg' || item.attachFile.fileSuffix=='png'"></image>
					<image src="../../../../../static/phone/case-detail-excel.png" style="width: 48rpx;height: 48rpx;"
					v-if="item.attachFile.fileSuffix =='xls' || item.attachFile.fileSuffix=='xlsx'"></image>
					<image src="../../../../../static/phone/case-detail-word.png" style="width: 48rpx;height: 48rpx;"
					v-if="item.attachFile.fileSuffix =='docx' || item.attachFile.fileSuffix=='doc'"></image>
					<image src="../../../../../static/phone/case-detail-ppt.png" style="width: 48rpx;height: 48rpx;"
					v-if="item.attachFile.fileSuffix =='pptx' || item.attachFile.fileSuffix=='ppt'"></image>
					<image src="../../../../../static/phone/case-detail-pdf.png" style="width: 48rpx;height: 48rpx;"
					v-if="item.attachFile.fileSuffix =='pdf' || item.attachFile.fileSuffix=='pdfx'"></image>
					
					<view style="margin-left: 16rpx;">
						<view class="filename">
							{{item.attachFile.nameF}}
						</view>
						<view class="filetime" style="display: flex;">
							<text>{{item.createTime}} 来自 {{item.account.realName}}</text>
							<image src="../../../../../static/phone/lvshi.png" 
							style="width: 48rpx;height: 32rpx;" v-if="item.userType.code=='3' || item.userType.code=='4'"></image>
						</view>
					</view>	
				</view>
			
			
				
			</view>
		</view>
		
		
		<common-choose v-if="showSort" :chooseList="sortList" 
			:chooseResult="sortResult" :chooseTag="chooseTag" @gotIt="gotIt"></common-choose>
			
		<view class="zhezhao" v-if="showSift">
			
			<view class="view-bottom">
				<view class="title-view">
					文件类型
				</view>
				<view class="sift-listview">
					<view v-for="(item,index) in siftTypeList" :key="index" 
					:class="item.sel ? 'sift-item-foucs':'sift-item'"  @click="sfitType(index)">
						{{item.name}}
					</view>
				</view>
				
				<view class="title-view">
					上传角色
				</view>
				<view class="sift-listview">
					<view v-for="(item,index) in siftRoleList" :key="index" 
					:class="item.sel ? 'sift-item-foucs':'sift-item'" @click="siftRole(index)">
						{{item.name}}
					</view>
				</view>
				
				
				<view class="view-bottom-s">
					<view class="view-bottom-c" @click="cancelSift">
						重置
					</view>
					<view class="view-bottom-b" @click="goSift">
						确定
					</view>
				</view>
				<!-- <view style="height: 68rpx;background: #ffffff;" v-if="needAdapt"> -->
					<!-- 苹果x及以上的安全距离 -->
				<!-- </view> -->
				
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import commonChoose from '../../../common/commonChoose.vue'
	const innerAudioContext = uni.createInnerAudioContext();
	let app = ''
	export default{
		components:{commonChoose},
		data(){
			return{
				heightY:'',
				search:'',
				role:'',
				roleUrl: '',
				caseId:'',
				dataList:[],
				
				//以下为排序
				showSort:false,
				sortResult:'全部',
				sortResultId:'1',
				chooseTag:'sort',
				sortList: [{
						id: '1',
						value: '全部',
						name:'全部'
					},
					{
						id: '2',
						value: '按更新时间倒序',
						name:'按更新时间倒序'
					},
					{
						id: '3',
						value: '按更新时间顺序',
						name:'按更新时间顺序'
					}
				],
				//以上为排序
				//以下为筛选
				showSift:false,
				needAdapt:false,
				
				type:'',
				siftTypeList:[],
				siftRoleList:[],
				userType:'',
				
				musicOpen: require('../../../../../static/phone/case-detail-open.png'),
				musicStop: require('../../../../../static/phone/case-detail-stop.png'),
			}
		},
		onLoad(options) {
			app = getApp()
			var _this = this
			_this.caseId = options.caseId
			console.log(_this.chooseList)
			// _this.needAdapt = app.globalData.needAdapt && app.globalData.isIPhone
			_this.role = app.globalData.role
		
			_this.roleUrl = _this.$roleUrl({
				tab: _this.role
			})
			_this.heightY = ((app.globalData.screenHeight-96)*2)+'rpx'
			_this.attach_file_type()
			_this.param_customer_type()
		},
		onShow() {
			this.getList()
		},
		mounted() {
			
		},
		methods:{
			
			//获取附件类型
			async attach_file_type(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/attach_file_type",
					method:'GET',//默认是GET
				})
				console.log('附件类型',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.siftTypeList = list
				}
			},
			//获取上传角色
			async param_customer_type(){
				let _this = this
				const res = await _this.$myRequest({
					url: "/comm/dict/list/$Type$user",
					method:'GET',//默认是GET
				})
				console.log('角色',res)
				if(res.data.code==200){
					let list = res.data.data
					for (var i = 0; i < list.length; i++) {
						list[i]['sel'] = false
					}
					_this.siftRoleList = list
				}
			},
			
			async getList(){
				let _this = this
							
				let parmas={
					"page":1,
					"size":1000,
					"caseId":_this.caseId,
					
				}
				if(_this.search.length>0){
	
					parmas={
						"page":1,
						"size":1000,
						"caseId":_this.caseId,
						"attachFileQuery":{
							name : 'lk:'+_this.search
						}
					}
				}
				if(_this.type!=''){
					if(_this.type.indexOf(',')>-1){
						parmas.type = 'in:'+ _this.type
					}else{
						parmas.type = _this.type
					}
				}
				
				if(_this.userType!=''){
					if(_this.userType.indexOf(',')>-1){
						parmas.userType = 'in:'+ _this.userType
					}else{
						parmas.userType = _this.userType
					}
				}
				
				
				if(_this.sortResultId==2){
					parmas.desc = 'createTime'
				}else if(_this.sortResultId==3){
					parmas.asc = 'createTime'
				}
				
				const res = await _this.$myRequest({
					url: `/${_this.roleUrl}/caseAttach/listByCase`,
					data:parmas,
					method:'POST',//默认是GET
				})
				console.log('文件列表',res)
				if(res.data.code==200){
					let list = res.data.data.list
					for (var i = 0; i < list.length; i++) {
						let name = list[i]['attachFile']['name']
						let nameArray = name.split('.')
						//后缀
						let nameL = nameArray[nameArray.length-1]
						//后缀前面的部分
						let nameF = name.substring(0,name.length-nameL.length-1)
						if(name.length>25){
							nameF = nameF.substring(0,22)+'...'+nameL
						}else{
							nameF = name
						}
						list[i]['attachFile']['nameF'] = nameF
						
						if(nameL =='m4a' || nameL=='aac'){
							list[i]['openOrStopMusic'] = false
						}
						
					}
					_this.dataList = list
				}
			},
			
			searchInput(val){
				this.search = val.detail.value
				this.dataList = []
				this.getList()
			},
			
			/**
			 * 点击了排序
			 */
			sort(){
				this.$nextTick(()=>{
					this.showSort = true
				})
			},
			/**
			 * @param {Object} 点击了筛选
			 */
			sift(){
				this.showSift = true
			},
			/**
			 * @param {Object} 选择文件类型
			 */
			sfitType(index){
				let _this = this
				_this.siftTypeList[index]['sel'] = !_this.siftTypeList[index]['sel']
			},
			/**
			 * @param {Object} 选择上传角色
			 */
			siftRole(index){
				let _this = this
				_this.siftRoleList[index]['sel'] = !_this.siftRoleList[index]['sel']
			},
			
			/**
			 * 获取选择结果
			 */
			gotIt(val){
				console.log(val)
				let _this = this
				_this.showSort = false
				let tag = val.split(";")[0]
				let index = val.split(";")[1]
				_this.sortResult = _this.sortList[index]['value']
				_this.sortResultId = _this.sortList[index]['id']
				_this.dataList = []
				_this.getList()
			},
			
			/**
			 * 获取筛选结果
			 */
			goSift(){
				let _this = this
				_this.showSift = false
				let type = ''
				for (var i = 0; i < _this.siftTypeList.length; i++) {
					if(_this.siftTypeList[i]['sel']){
						console.log(_this.siftTypeList[i]['name'])
						type = _this.siftTypeList[i]['id']+','+type
					}
				}
				if(type.length>1){
					type = type.substring(0,type.length-1)
				}
				
				_this.type = type
				
		
				
				let userType = ''
				for (var i = 0; i < _this.siftRoleList.length; i++) {
					if(_this.siftRoleList[i]['sel']){
						console.log(_this.siftRoleList[i]['name'])
						userType = _this.siftRoleList[i]['id']+','+userType
					}
				}
				if(userType.length>1){
					userType = userType.substring(0,userType.length-1)
				}
				
				_this.userType = userType
				
				_this.dataList = []
				
				_this.getList()
				
			},
			
			/**
			 * 重置
			 */
			cancelSift(){
				let _this = this
				for (var i = 0; i < _this.siftTypeList.length; i++) {
					_this.siftTypeList[i]['sel'] = false
				}
				for (var i = 0; i < _this.siftRoleList.length; i++) {
					_this.siftRoleList[i]['sel'] = false
					
				}
			},
		
			/**
			 * 操作音频
			 */
			opreaMusic(val,index) {
				console.log(val)
			
				let _this = this
				let list = _this.dataList
				
				if(!val.openOrStopMusic){
					innerAudioContext.src = val.attachFile.fileUrl
					innerAudioContext.play();
				}else{
					innerAudioContext.pause()
				}
				list[index]['openOrStopMusic'] = !list[index]['openOrStopMusic']
				_this.dataList = list
			},
			
			/**
			 * 预览文档
			 */
			async preview(item,index){
			
				let url = item.attachFile.fileUrl
				const res = await this.$myRequest({
					url: `/comm/oss/url`,
					data:{
						ossPath:url
					},
					method:'GET',//默认是GET
				})
				// console.log('获取文件路径',res)
				if(res.data.code==200){
					let ss = res.data.data.url
					if(item.attachFile.fileSuffix =='jpg' || item.attachFile.fileSuffix=='png'){
						let ssl = []
						ssl.push(ss)
						uni.previewImage({
							indicator: "none", //图片指示器样式
							current:0,
							urls:ssl,
							success: (img) => {
								// console.log(img)
							}
						})
					}else{
						// console.log('打开文档',ss)
						uni.downloadFile({
							url:ss,
							success: (downloadFile) => {
								// console.log(downloadFile)
								uni.openDocument({
									filePath:downloadFile.tempFilePath
								})
							}
						})
						
					}
					
				}
			
			},
		}
	}
</script>

<style>
	page{
		background-color: #ffffff;
	}
</style>
<style scoped lang="scss">
	.main-top{
		height: 96rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.main-search{
		width: 686rpx;
		height: 64rpx;
		background: #F7F7F7;
		border-radius: 32rpx;
		display: flex;
		align-items: center;
	}
	.placeholder_class{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-left: 8rpx;
	}
	.ttext1{
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		
	}
	
	.filename{
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	.filetime{
		font-size: 20rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		margin-top: 8rpx;
	}
	
	.zhezhao {
		width: 100%;
		height: 100vh;
		background: rgba(0, 0, 0, 0.4);
		z-index: 9999;
		position: fixed;
		left: 0;
		top: 0;
		overflow: scroll;	
		// padding-top: 10vh;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.view-bottom{
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #ffffff;
		border-radius: 8px 8px 0px 0px;
		padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部
		
	}
	.view-bottom-s{
		height: 108rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx #eeeeee solid;
		background-color: #ffffff;
	}
	.view-bottom-c{
		width: 260rpx;
		height: 88rpx;
		border-radius: 44rpx;
		border: 1px solid #2DA9C5;
		margin-left: 32rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.view-bottom-b{
		width: 394rpx;
		height: 88rpx;
		background: #2DA9C5;
		border-radius: 58rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #E8F7FB;
		line-height: 50rpx;
		margin-left: 32rpx;
	}	
	
	.title-view{
		height: 114rpx;
		display: flex;
		align-items: center;
		padding-left: 32rpx;
		font-size: 36rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #333333;
	}
	.sift-listview{
		display: flex;
		flex-wrap: wrap;
	}
	.sift-item{
		width: 212rpx;
		height: 72rpx;
		background: #F7F7F7;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 400;
		color: #18252C;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
	.sift-item-foucs{
		width: 212rpx;
		height: 72rpx;
		background: #E8F7FB;
		border-radius: 8rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #2DA9C5;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 26rpx;
		margin-bottom: 32rpx;
	}
	
	
	.list-content-yuyin {
		width: 384rpx;
		height: 80rpx;
		background: #F7F7F7;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
	}
</style>